<template>
  <page-frame class="expand-wait" :showPageRefresh="showPageRefresh" v-model:refresh-loading="pageRefreshLoading"
    :goBackPage="goBackPage" @onRefresh="getDataList">
    <template #header-title>待接单</template>
    <div class="main">
      <div class="search-box">
        <page-search></page-search>
      </div>
      <div class="date-selector">
        <div class="date-selected-text">{{ shiftInfo?.date || '2023-02-17' }}</div>
        <div class="task-count">{{ list?.length || 0 }}</div>
      </div>
      <div class="main-task-info">
        <div class="task-list">
          <div class="task-info-list">
            <!-- system_state : 1 正常 ,反之超時 -->
            <div v-for="(item, i) in list" :key="i" class="info-li" :class="[{ 'info-timeout': item.system_state != 1 }]"
              @click="goDetail(item)">
              <div class="task-name">
                <div class="">JAM-{{ item.id }}</div>
              </div>
              <div class="task-tag f-b">
                <!-- 1:cande 2:transfer 3canceled 4transfered 5cancel reject 6transfer reject -->
                <div v-if="['5', '6'].includes(item.cancel_state + '')" class="tag-item tag-urgent-3"
                  @click.stop="showNotify({ message: item.reject_reason, type:'primary'})">
                  reject
                </div>
                <div class="tag-item" :class="[`tag-urgent-${item.urgent || '1'}`]">
                  {{ getUrgentValue(item.urgent) }}
                </div>
                <div class="tag-item tag-machine">{{ item.short }}</div>
                <div class="tag-item">{{ item?.contents?.category }}</div>
              </div>
            </div>
          </div>
          <div class="task-line"></div>
        </div>
        <div v-if="!list || list.length <= 0">
          <!-- 通用错误 -->
          <van-empty description="没有相关信息" />
        </div>
      </div>
      <page-footer v-if="list && list.length > 10" isMainPage>已经到达底部了</page-footer>
    </div>
  </page-frame>
</template>

<script >
import { PendingApi } from '@/apis/pending/pending'
import pageBase from '@/views/mixins/page-base'
import pageRefresh from '@/views/mixins/page-refresh'
export default {
  mixins: [pageBase, pageRefresh],
  data() {
    return {
      list: null
    }
  },
  methods: {
    getDataList() {
      this.pageRefreshLoading = true
      PendingApi.getList()
        .then(res => {
          this.pageRefreshLoading = false
          this.list = res.data
        })
        .catch(error => { })
    },
    goDetail(item) {
      this.$router.push({
        name: 'wait-detail',
        params: {
          value: this.getParamsString(item) // escape(JSON.stringify(item))
        }
      })
    },

  },
  created() {
    this.getDataList()
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/expand.scss';

.expand-wait {
  .task-info-list {
    .info-li {
      @include task-list-box-info(wait);
      @extend .f-b, .box-b, .a-i-c, .p8, .p-t0, .p-b0, .m-b5;
      border-radius: 14px;
      border: 1px solid var(--wait-task-bg-color);

      &::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 8px;
        width: 2px;
        height: 24px;
      }

      .tag-item {
        min-width: 44px;
        text-align: center;
      }

      .tag-machine {
        background: var(--completed-task-tag-bg-color);
        color: var(--completed-task-tag-color);
      }

      @include tag-urgent-color(1);
      @include tag-urgent-color(2);
      @include tag-urgent-color(3);
    }

    .info-timeout {
      border: 1px solid rgba(204, 18, 18, 1);
    }
  }
}
</style>
